<!--
/* 公司信息管理
 * Author:      cn2008tv
 * CreateTime:  2024/1/5
 * LastEditor:  cn2008tv
 * ModifyTime:  2024/1/5
 * Description: 
*/ 
-->
<template>
  <div class="bigBox">

    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>

        <a-col :span="24" style="margin-bottom: 20px;text-align:center;">
          <span style="vertical-align:center;width:100%;font-size:1.4rem;font-weight:bold;">分公司配置数据</span>
        </a-col>        

        <a-col :span="24" style="margin-bottom: 60px">
          <div style="padding-left: 100px">
            <a-button type="primary" @click="addhard">添加配置数据</a-button>

            <el-table v-if="dataList.length>0" :data="dataList"
                      style="overflow-y: auto;width: 100%;margin-bottom: 20px">

              <el-table-column align="center" label="公司名称">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'name')" v-model="scope.row.name"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="省份|直辖市">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'province')" v-model="scope.row.province"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="地|市|县">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'city')" v-model="scope.row.city"
                            :placeholder="'请输入'" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column align="center" label="位置">
                <template #default="scope">
                  <el-input @input="hardChange($event,scope.$index,'coordinateXY')" v-model="scope.row.coordinateXY"
                                   :placeholder="'请输入'" style="width: 70%" >
                     
                  </el-input>
                  <el-button @click="handleCoordinateXY($event,scope.$index,'coordinateXY')">选择</el-button>
                </template>
              </el-table-column>

              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <a @click="dataList.splice(scope.$index, 1)">删除</a>
                  <!--                    <a @click="deleteHardList(scope.$index)">删除</a>-->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </a-col>

        <a-col :span="20"></a-col>
        <a-col :span="4">
          <a-button type="primary" @click="submit">提交</a-button>
        </a-col>

      </a-row>
    </a-form>
    <a-modal
      append-to-body
      :visible="dialogVisible"
      title="选择地市位置-双击地图"
      @cancel="handleCancel"
      :width="800"
      :height="600"
    >
      <!--有的组件用的是拷贝-->
      <div class="map4" @dblclick="handleMapClick" ref="echartRef" ></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleOk()">
            确定
          </el-button>
        </span>
      </template>

    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref,Ref,onMounted} from "vue";
import {getValueType} from "/@/utils";
import {defHttp} from "/@/utils/http/axios";
import {useMessage} from "/@/hooks/web/useMessage";
import { queryById , saveOrUpdate} from './ScreenData.api';
import {
  useECharts
} from '/@/hooks/web/useECharts';
import china from "/@/assets/data/china.json";

const echartRef = ref < HTMLDivElement | null > (null);

const {
  setOptions,
  echarts,
  getInstance
} = useECharts(echartRef as Ref < HTMLDivElement > , 'dark');


const labelCol = ref<any>({xs: {span: 24}, sm: {span: 5}});
const wrapperCol = ref<any>({xs: {span: 24}, sm: {span: 16}});

const formData = reactive<Record<string, any>>({
  dataList: [],
});

const currentIndex = ref(-1);
const model = {
  id : '5',
  value: '',
  name:'公司配置',
  code:'GSPZ'
};


let dataList = ref([
  {name: "研究总院、国际公司、中联公司",city:"北京",province:"北京市",coordinateXY:"116.407526, 39.90403"},
  {name: "天津分公司",city:"天津",province:"天津市",coordinateXY:"117.200983, 39.084158"},
  {name: "上海分公司",city:"上海",province:"上海市",coordinateXY:"121.473701, 31.230416"},
  {name: "中联公司",city:"大同",province:"山西省",coordinateXY:"113.359951,40.092821"},
  {name: "湛江分公司",city:"湛江",province:"广东省",coordinateXY:"110.359377, 21.270708"},
  {name: "深圳分公司",city:"深圳",province:"广东省",coordinateXY:"114.057868, 22.543099"},
  {name: "海南分公司",city:"海口",province:"海南省",coordinateXY:"110.199877, 20.00506"},
]);

let dialogVisible = ref(false)
const option = reactive({
  geo: {
    map: 'china',
    roam: false, //是否允许缩放，拖拽
    zoom: 1.5, //初始化大小
    //缩放大小限制
    scaleLimit: {
      min: 1, //最小
      max: 4, //最大
    },
    //设置中心点
    center: [103.73, 36.03],
    label: {
      emphasis: {
        show: false
      }
    },
    //省份地图添加背景
    regions: [],
    itemStyle: {
      areaColor: 'rgba(7,21,57,0.4)',
      //color: 'red',
      borderColor: '#0177ff',
      borderWidth: 1,
    },
    //高亮状态
    emphasis: {
      itemStyle: {
        areaColor: 'rgba(0,60,153,0.5)', //鼠标指上市时的颜色
        color: '#ffffff',
      },
    },
  },
  //配置属性
  series: {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    //zlevel: 2,
    data: [],
    rippleEffect: {
      brushType: 'stroke'
    },
    label: {
      emphasis: {
        show: true,
        position: 'left',
        formatter: '{b}'
      },
      fontSize:26,
      color: '#ffffff'
    },
    hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
    symbolSize: 12,
    showEffectOn: 'render',
    itemStyle: {
      normal: {
        color: '#F70C2B',
        areaColor: 'rgba(0,60,153,0.8)',        
      }
    },

  },
});



function initCharts() {  
  setOptions(option,true);
}

/**
 * 取消事件  
 * Author:      yangjq 
*/ 
function handleCancel() {
  dialogVisible.value = false
}



/**
 * 取消事件  
 * @author:      yangjq 
*/ 
function handleOk() {
  dialogVisible.value = false
}


/* 添加
 * Author:      cn2008tv 
 * CreateTime:  2022/12/5 14:44:02 
 * LastEditor:  cn2008tv 
 * ModifyTime:  2022/12/5 14:44:02 
 * Description: 
*/ 
function addhard() {
  dataList.value.push({name: '',city:'',province:'',coordinateXY:""})
}

function hardChange(data, index, key) {
  let arr = JSON.parse(JSON.stringify(dataList.value))
  arr[index][key] = data
  dataList.value = arr
}

function handleCoordinateXY(e,index, key){
  dialogVisible.value = true;
  currentIndex.value = index;
  initCharts();
}
const {createMessage} = useMessage();

function submit() {
  formData.dataList = dataList.value;
  model.value = JSON.stringify(formData);  
  saveOrUpdate(model, true)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
    });
}


const createdData = () => {
  let params = {};
  queryById({id:'5'}).then((res) => {
    if (res.success) {
        console.log(res.result)
        let record = JSON.parse(res.result.value);
        if(record){
          Object.assign(formData,record);
          Object.assign(model, res.result);
          dataList.value = record.dataList?record.dataList:[];
        }
      }
    });
};

function handleMapClick(param){
  // 地图当前点击经纬度
  let chart = getInstance();
  let arr = chart.convertFromPixel('geo', [param.offsetX, param.offsetY]);
  for(let i=0;i<arr.length;i++){
    arr[i] = arr[i].toFixed(6);
  }
  dialogVisible.value = false;
  dataList.value[currentIndex.value]['coordinateXY'] = arr.join(',');
}

onMounted(()=>{
    createdData();
    echarts.registerMap("china", china);
    
    // echartRef.on('click', function (param) {
		// // 地图当前点击经纬度
    //     console.log(chart.convertFromPixel('geo', [param.event.offsetX, param.event.offsetY]));
    // });

  }
);

</script>

<style lang="less" scoped>
.bigBox {
  width: 100%;
  padding: 20px;
}

.antd-modal-form {
  background-color: white;
  /*overflow-y: auto;*/
  padding: 24px 24px 24px 24px;
}

.map4{ width: 780px;height: 540px; }
</style>
